import React, {memo, useState} from 'react'
import Indicator from "@/base-ui/indicator";
import {DemoWrapper} from "@/views/demo/style";

const Demo = memo(() => {

    const names = [2433, 2424, 234234, 242]
    const [selectIndex, setSelectIndex] = useState(0)
    const toggleClickHandle = (isNext = true) => {
        let newIndex = isNext ? selectIndex + 1 : selectIndex - 1;
        if (newIndex < 0) newIndex = names.length - 1;
        if (newIndex > names.length - 1) newIndex = 0;
        console.log('newIndex',newIndex)
        setSelectIndex(newIndex)
    }
    return (
        < DemoWrapper>
            <div className='control'>
                <button onClick={e => toggleClickHandle(false)}>上一个</button>
                <button onClick={e => toggleClickHandle(true)}>下一个</button>
            </div>

            <div className="list">
                <Indicator selectIndex={selectIndex}>
                    {
                        names.map(item => {
                            return <button key={item}>{item}</button>
                        })
                    }
                </Indicator>
            </div>
        </DemoWrapper>
    )
})
export default Demo
